<template>
  <el-select filterable>
    <el-option
      v-for="item in selectUsers"
      :key="item.userId"
      :label="item.nickName"
      :value="item.userId"
    />
  </el-select>
</template>
<script setup lang="ts">
import { type PropType, ref, watch } from "vue";
import type { UserModel, UserReq } from "@/api/system/user/types";
import { userApi } from "@/api/system/user/index";
// 组件接受参数
const props = defineProps({
  users: {
    type: Array as PropType<Array<UserModel>>,
    default: () => [],
  },
  roleCode: {
    type: String,
    default: "",
  },
});

// 可选择用户
let selectUsers = ref<UserModel[]>([]);

if (props.roleCode !== "") {
  // 查询角色启用用户
  userApi
    .findList({ roleCode: props.roleCode, hasUserStatus: true } as UserReq)
    .then((res) => {
      selectUsers.value = res.data.results;
    });
} else {
  selectUsers.value = props.users;
}

// 监控users更新选项
watch(
  () => props.users,
  () => {
    selectUsers.value = props.users;
  },
);
</script>
